<template>
	<view>
			<view class="list-content animated flipInX" v-for="(item,index) in orderlist" :key="index"
				:style=" 'animation-delay:' +(index - (0.9999* index)) +'s !important;'"
				@click="sheeShowClick(item.order_id)">
				<view class="dateils-top">
					<view class="" style="font-weight: 550;"><text class="text">单号</text>:{{item.trade_no}}</view>
					<view>
						<u-tag :text="item.status_text" shape="circle" :type="staColor(item.status_text)" />
					</view>
				</view>
				<view class="dateils-content">
					<view>{{item.body}}x{{item.quantity+"张"}}</view>
				</view>
				<view class="dateils-bottom">
					<view class="dateils-money"><text class="text">订单金额</text>:  
					<text style="color: #d60000;">￥{{item.fee}}</text></view>
					<view class="dateils-time">创建时间 : {{item.create_time}}</view>
				</view>
			</view>
			<u-loadmore :status="status" bg-color="#f3f4f6" v-if="!orderlist" />
			<view class="empty" v-if="emptyShow" style="height: 90vh;">
				<u-empty text="暂无订单" mode="list" :show="emptyShow"></u-empty>
			</view>
		<u-toast ref="uToast" />
		<view class="inform-body"></view>
		<authDialog :isAuthShow="isAuthShow" @authConfirm="authConfirm" ></authDialog>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					name: '',
				},
				sheeShow: false,
				orderlist: [],
				emptyShow: false,
				isAuthShow:false,
				page: 1,
				status: "loadmore",
				'limit': 10,
				total_page: 1,
				refundId: '',
			};
		},
		onLoad() {

			
		},
		onShow() {
			this.isAuthShow = false
			if (this.$u.test.isEmpty(this.vuex_token)) {
				this.isAuthShow = true
			}
			this.orderlist = []
			this.page = 1
			this.getorderList()
		},
		methods: {
			// 授权
			authConfirm(){
				this.getorderList()
				this.isAuthShow = false;
			},
			sheeShowClick(ev) {
				this.refundId = ev
				this.$u.route({
					url: 'pages/order/order_dateils?id=' + this.refundId,
				});
			},
			// 下拉菜单
			staColor(col) {
				switch (col) {
					case '支付成功':
						return 'success';
					case '待支付':
						return 'warning';
					case '未支付':
						return 'info';
					case '支付失败':
						return 'error';
					case '已出票':
						return 'success';
					case '订单超时':
						return 'primary';
					case '订单过期':
						return 'primary';
					case '退款申请中':
						return 'warning';
					case '退款驳回':
						return 'info';
					case '退款成功':
						return 'primary';
					case '退款失败':
						return 'error';
					default:
						break;
				}
			},
			getorderList(e) {
				let that = this
				let postData = {
					'page': that.page,
					'limit': 10
				};
				that.$u.post('/api/order/list', postData).then(res => {
					that.total_page = res.total_page
					let len = res.list.length
					if (len == 0) {
						this.emptyShow = true
					} else {
						this.emptyShow = false
					}
					for (let i = 0; i < len; i++) {
						that.orderlist.push(res.list[i])
					}
					if (res.total_page > 1) {
						that.status = 'loadmore';
					} else {
						that.status = 'nomore';
					}
				});
			},
		},
		onReachBottom() {
			let that = this;
			that.status = 'loading';
			that.page++;
			if (that.page > that.total_page) {
				that.status = 'nomore';
			} else {
				that.status = 'loading';
				that.getorderList();
			}
		},
	}
</script>

<style lang="scss" scoped>
		.list-content {
			margin-bottom: 10rpx;
			.dateils-top {
				display: flex;
				justify-content: space-between;
				background-color: #FFFFFF;
				padding: 15rpx 30rpx;
				border-bottom: 1rpx solid #ebebeb;
			}
			.dateils-content {
				padding: 10rpx 30rpx;
				background-color: #FFFFFF;
				view {
					padding: 10rpx 0rpx;
					width:100%;
					overflow: hidden; 
					white-space: nowrap; 
					text-overflow: ellipsis;
				}
			}
			.dateils-bottom {
				display: flex;
				justify-content: space-between;
				background-color: #FFFFFF;
				padding: 10rpx 30rpx;
				border-top: 1rpx solid #ebebeb;
				.dateils-money {
					font-size: 25rpx;
				}
				.dateils-time {
					font-size: 25rpx;
				}
			}
		.empty {
			display: flex;
			justify-content: center;
			width: 100%;
			left: 0;
			bottom: 0;
			right: 0;
			position: fixed;
			top: 0;
		}
	}
	.form-input {
		padding: 50rpx;
	}
</style>
